<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组基本操作(array basic operation)</title>
  <!-- 
  JavaScript 中的数组是一种用于存储多个值的对象。以下是数组的基本操作，包括创建、访问、修改、添加和删除元素等
  1. 创建数组
  - 使用数组字面量：
    let arr1 = [1, 2, 3, 4, 5];
  - 使用  `Array`  构造函数：
    let arr2 = new Array(5); // 创建一个长度为5的空数组
    let arr3 = new Array(1, 2, 3); // 创建一个包含1, 2, 3的数组

  2. 访问数组元素
  - 通过索引访问：
    let arr = [10, 20, 30];
    console.log(arr[0]); // 输出: 10
    console.log(arr[1]); // 输出: 20

  - 获取数组长度：
    console.log(arr.length); // 输出: 3

  3. 修改数组元素
  - 直接通过索引修改：
    arr[1] = 25;
    console.log(arr); // 输出: [10, 25, 30]

  4. 添加元素
  - 使用  `push()`  方法：
    arr.push(40); // 在数组末尾添加元素
    console.log(arr); // 输出: [10, 25, 30, 40]

  - 使用  `unshift()`  方法：
    arr.unshift(5); // 在数组开头添加元素
    console.log(arr); // 输出: [5, 10, 25, 30, 40]

  5. 删除元素
  - 使用  `pop()`  方法：
    arr.pop(); // 删除数组末尾的元素
    console.log(arr); // 输出: [5, 10, 25, 30]

  - 使用  `shift()`  方法：
    arr.shift(); // 删除数组开头的元素
    console.log(arr); // 输出: [10, 25, 30]
    
  - 使用  `splice()`  方法：
    arr.splice(1, 1); // 从索引1开始删除1个元素
    console.log(arr); // 输出: [10, 30]

  6. 遍历数组
  - 使用  `for`  循环：
    for (let i = 0; i < arr.length; i++) {
      console.log(arr[i]);
    }

  - 使用  `forEach()`  方法：
    arr.forEach((item) => {
      console.log(item);
    });

  7. 数组方法
  -  `map()`  方法：创建一个新数组，包含调用函数处理后的每个元素。
    let doubled = arr.map(x => x * 2);
    console.log(doubled); // 输出: [20, 60]

  -  `find()`  方法：返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
    let found = arr.find(x => x > 20);
    console.log(found); // 输出: 30

  -  `filter()`  方法：创建一个新数组，包含所有通过测试的元素。
    let filtered = arr.filter(x => x > 15);
    console.log(filtered); // 输出: [25, 30]

  -  `reduce()`  方法：对数组中的每个元素执行一个函数，返回单个值。
    let sum = arr.reduce((accumulator, current) => accumulator + current, 0);
    console.log(sum); // 输出: 40

  总结
  - 数组创建：可以使用字面量或构造函数创建数组。
  - 元素访问与修改：通过索引访问和修改数组元素。
  - 元素添加与删除：使用  `push()` 、 `pop()` 、 `shift()` 、 `unshift()`  和  `splice()`  等方法操作数组。
  - 数组遍历：可以使用  `for`  循环或  `forEach()`  方法遍历数组。
  - 数组方法：常用的方法如  `map()` 、 `filter()`  和  `reduce()`  可用于处理数组数据。

  掌握这些基本操作，可以有效地管理和操作 JavaScript 中的数组。
   -->
</head>
<body>

  <script>
    {
      // 1.创建数组
      let arr = [10, 20, 30, 40, 50];

      // 2.访问数组元素
      console.log(arr[0]); // 输出: 10

      // 3.修改数组元素
      arr[1] = 25;
      console.log(arr); // 输出: [10, 25, 30, 40, 50]

      // 4.添加数组元素
      // 4.1 push在数组末尾添加元素
      arr.push(60);
      console.log(arr); // 输出: [10, 25, 30, 40, 50, 60]
      // 4.2 unshift在数组开头添加元素
      arr.unshift(5);
      console.log(arr); // 输出: [5, 10, 25, 30, 40, 50, 60]

      // 5.删除数组元素
      // 5.1 pop删除数组末尾元素
      arr.pop();
      console.log(arr); // 输出: [10, 25, 30, 40, 50]
      // 5.2 shift删除数组开头元素
      arr.shift();
      console.log(arr); // 输出: [25, 30, 40, 50]

      // 6.遍历数组
      for (let i = 0; i < arr.length; i++) {
        console.log(arr[i]);
      }
    }

    console.log("========================================");

    {
      let arr = [10, 20, 30, 40, 50];
      // 7.使用数组方法
      // 7.1 map
      let mapped = arr.map(x => x * 2);
      console.log("map", mapped); // 输出: [20, 40, 60, 80, 100]
      // 7.2. filter
      let filtered = arr.filter(x => x > 30);
      console.log("filter", filtered); // 输出: [40, 50]
      // 7.3. reduce
      let sum = arr.reduce((acc, x) => acc + x, 0);
      console.log("reduce", sum); // 输出: 150
      // 7.4. join
      let joined = arr.join("-");
      console.log("join", joined); // 输出: "10-20-30-40-50"
      // 7.5. slice: 复制数组的一部分
      // slice(start, end)
      let sliced = arr.slice(1, 3);
      console.log("slice", sliced); // 输出: [20, 30]

      {
        let arr = [10, 20, 30, 40, 50];
        // 7.6. splice: 删除或替换数组元素(先删除后插入)
        // splice(start, deleteCount, item1, item2, ...)
        // 7.6.1. 删除元素
        let spliced = arr.splice(1, 2);
        console.log("删除元素", spliced); // 输出: [20, 30]
        // 7.6.2. 替换元素
        arr.splice(1, 2, 60, 70);
        console.log("替换元素splice", arr); // 输出: [10, 60, 70]
        // 7.6.3. 插入元素(0, -1)
        arr.splice(1, 0, 60, 70, 80);
        console.log("插入元素splice", arr); // 输出: [10, 60, 70, 80, 60, 70]
      }

      // 7.7. sort
      let sorted = arr.sort((a, b) => a - b);
      console.log("sort", sorted); // 输出: [10, 20, 30, 40, 50]
      // 7.8. reverse
      let reversed = arr.reverse();
      console.log("reverse", reversed); // 输出: [50, 40, 30, 20, 10]
      // 7.9. concat
      let concated = arr.concat([60, 70]);
      console.log("concat", concated); // 输出: [50, 40, 30, 20, 10, 60, 70]
      // 7.10. indexOf: 获取某个元素在数组中第一次出现的位置
      let index = arr.indexOf(30);
      console.log("indexOf", index); // 输出: 2
      // 7.11. lastIndexOf: 获取某个元素在数组中最后一次出现的位置
      let lastIndex = arr.lastIndexOf(30);
      console.log("lastIndexOf", lastIndex); // 输出: 2
      // 7.12. includes: 判断数组中是否存在某个元素
      let includes = arr.includes(40);
      console.log("includes", includes); // 输出: true
      // 7.13. every : 判断数组中是否所有元素都满足条件 - 数组中所有元素都大于0
      let every = arr.every((value) => value > 0);
      console.log("every", every); // 输出: true
      // 7.14. some: 判断数组中是否存在满足条件的元素 - 数组中存在大于50的元素
      let some = arr.some((value) => value > 50);
      console.log("some", some); // 输出: true
    }

    // 8.案例获取文件后缀名
    const path = "https://www.example.com/images/photo.jpg"
    const fixName = path.split(".").pop()
    console.log(fixName);
    

    
  </script>
  
</body>
</html>